<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">信息输入框</view>
		</w-navbar>

		<pageDemoBlock title="应用场景" color="#b65ae4" :contentStyle="{padding: '20rpx 0'}">
			<view class="demo">
				<view class="demo-title">请输入短信验证码</view>
				<view class="demo-tip">验证码已发送至188****8888,请在下方输入框内输入4位数字验证码</view>
			</view>
			<w-messageInput v-model="codenum" focus :maxlength="4" type="number"></w-messageInput>
		</pageDemoBlock>

		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{padding: '20rpx 0'}">
			<w-messageInput v-model="code"></w-messageInput>
		</pageDemoBlock>

		<pageDemoBlock title="自定义长度/大小/类型/颜色" color="#e4aba4" :contentStyle="{padding: '20rpx 0'}">
			<w-messageInput v-model="text" activeBorderColor="#00AAFF" defaultBorderColor="#979AC3" :itemSize="60"
				:maxlength="8" type="text"></w-messageInput>
		</pageDemoBlock>

	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block'
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				codenum: '',
				code: '12',
				text: '文本类型'
			};
		}
	}
</script>

<style lang="scss" scoped>
	.demo {
		padding: 40rpx;

		.demo-title {
			font-size: 42rpx;
			margin-bottom: 10rpx;
		}

		.demo-tip {
			font-size: 26rpx;
			color: #969696;
		}
	}
</style>
